<template>
  <div>
    <button @click="del">清空？</button>
    <div id="queryEcharts" style="height: 600px"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
    data () {
        return {
            newD: []
        }
    },
    props: {
        queryData: Array
    },
    methods: {
        initEcharts (data) {
            let e = echarts.init(document.getElementById('queryEcharts'))
            let o = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: [
                    {
                        type: 'tree',
                        data: data,
                        top: '18%',
                        bottom: '14%',
                        layout: 'radial',
                        symbol: 'emptyCircle',
                        symbolSize: 7,
                        initialTreeDepth: 3,
                        animationDurationUpdate: 750
                    }
                ]
            }
            e.hideLoading()
            e.setOption(o)
        },
        del () {
            this.new = [
                {
                    name: '杰森斯坦森',
                    children: [
                        {
                            name: 'analytics'
                        }
                    ]
                }
            ]
            this.initEcharts(this.new)
        }
    }
}
</script>
<style scoped>
</style>
